<template>
	<view class="container">
		<view class="login">
			<view class="uni-h2 text-center title">红杉树美家</view>
			<uni-forms ref="form" :rules="rules" :modelValue="formData" :border="true">
				<view class="bg-white m-t30 m-b20 round-20">
					<uni-forms-item label="账号" name="username">
						<input class="formItem" type="text" v-model="formData.username" placeholder="请输入账号" />
					</uni-forms-item>
				</view>
				<view class="bg-white round-20">
					<uni-forms-item label="密码" name="password">
						<input class="formItem" type="password" v-model="formData.password" placeholder="请输入密码" />
					</uni-forms-item>
				</view>
			</uni-forms>
			<button class="formBtn m-auto bg-blue text-white" @click="submitForm">登录</button>
			<!-- #ifdef MP-WEIXIN -->
			<view class="wechatLogin">
				<image class="wechatLogin_icon" src="/static/wechat.png" />
				<button type="default" class="wechatLogin_btn" open-type="getUserInfo" @getuserinfo="wechatLogin">
				</button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/md5.js';
	import {
		login
	} from '@/api/base.js';
	import request from '@/common/request.js'
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					username: "",
					password: "",
				},
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入账号'
							},
							{
								minLength: 3,
								maxLength: 18,
								errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符'
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								minLength: 6,
								maxLength: 18,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'
							}
						]
					}
				},
				login_num: 0,
				loginCode: "", //登录获取code
			}
		},
		onLoad() {
			let token = uni.getStorageSync("token");
			if (token) {
				uni.switchTab({
					url: "/pages/index/index"
				})
				return;
			}
			uni.clearStorageSync();
			this.login()
		},
		methods: {
			// 触发提交表单
			submitForm() {
				let that = this;
				this.$refs.form.validate().then(params => {
					login({
						password: md5.hex_md5(params.password),
						username: params.username,
						from: "weminicut",
						noCheck: "token"
					}).then(res => {
						if (res.code == '0') {
							uni.setStorageSync("expires_time", res.data.expires_time);
							uni.setStorageSync("token", res.data.token);
							uni.setStorageSync("userinfo", res.data.info);
							uni.setStorageSync("uuid", res.data.uuid);

							uni.switchTab({
								url: "/pages/index/index"
							})
						} else {
							uni.showToast({
								title: res.msg || "账号密码错误",
								icon: 'none'
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			login() {
				let that = this;
				uni.login({
					success: function(loginRes) {
						that.loginCode = loginRes.code
					}
				})
			},
			// 微信登录
			wechatLogin(result) {
				let that = this;
				request({
					url: "api/weminiLogin",
					method: "POST",
					data: {
						code: that.loginCode,
						iv: result.detail.iv,
						encryptedData: result.detail.encryptedData,
						from: "weminicut"
					}
				}).then(res => {
					if (res.code == '406' || res.code == '21' || res.code == '1001') { //未注册
						uni.redirectTo({
							url: `/pages/user/register?wechat_id=${res.data}`
						})
						return;
					}
					if (res.data.uuid == undefined) {
						return;
					}
					uni.setStorageSync("expires_time", res.data.expires_time);
					uni.setStorageSync("token", res.data.token);
					uni.setStorageSync("userinfo", res.data.info);
					uni.setStorageSync("uuid", res.data.uuid);

					uni.switchTab({
						url: "/pages/index/index"
					})
				})
			}
		}
	}
</script>

<style>
	page,
	uni-page-body {
		background-color: #fff;
	}

	.container {
		padding: 0 10%;
	}

	.is-required {
		display: none;
	}

	.title {
		margin-top: 70rpx;
		color: rgba(51, 51, 51, 1);
	}

	.formBtn {
		margin-top: 100rpx;
		border-radius: 40rpx;
	}

	.uni-forms-item {
		display: inline !important;
	}

	.uni-forms-item__label {
		width: 100%;
		display: initial ! !important;
		padding-bottom: 10rpx !important;
	}

	.uni-forms-item--border {
		border-top: none !important;
	}

	.formItem {
		min-height: 96rpx;
		line-height: 96rpx;
		padding: 0 20rpx;
	}

	.formItem {
		background-color: #F0F0F0;
		border-radius: 40rpx;
		line-height: 96rpx;
	}

	.wechatLogin {
		/* position: absolute; */
		position: relative;
		width: 50%;
		margin: 200rpx auto 50rpx;
		/* bottom: 600rpx; */
		/* border-top: 1px solid rgba(0, 0, 0, 0.1); */
		/* left: 25%; */
		text-align: center;

	}

	.wechatLogin::before {
		content: "";
		display: block;
		height: 1px;
		background: rgba(0, 0, 0, 0.1);
		transform: translateY(42rpx);
	}

	.wechatLogin_btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 10;
	}

	.wechatLogin_icon {
		position: relative;
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		z-index: 1;
	}
</style>